<template>
  <a-button @click="visible = !visible">{{
    visible ? '关闭' : '开启'
  }}</a-button>
  <confirm-bar :visible="visible">
    <template #content> 已选&nbsp;{{ 20 }}&nbsp;项 </template>
    <template #handle>
      <a-button type="link" @click="onCancel">取消选择</a-button>
      <a-button type="link" @click="onConfirm" :loading="loading">
        下载
      </a-button>
    </template>
  </confirm-bar>
</template>
<script setup>
import { ref } from 'vue'
import { message } from 'ant-design-vue'
import ConfirmBar from '@/components/confirm-bar/confirm-bar.vue'
/**
 * 接口模拟
 */
function mockApi() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() > 0.5) {
        resolve()
      } else {
        reject()
      }
    }, 1000)
  })
}
/**
 * 操作逻辑
 */
let loading = ref(false)
let visible = ref(true)
function onCancel() {
  visible.value = false
}
async function onConfirm() {
  loading.value = true
  try {
    await mockApi()
    message.success('下载成功')
    visible.value = false
  } catch (e) {
    message.error('下载失败')
  }
  loading.value = false
}
</script>
